<script setup lang="ts">
import { ContentWrapNoHeaderLine } from '@/components/ContentWrap'
import {
  ElButton,
  ElTabs,
  ElTabPane,
ElMessage
} from 'element-plus'
import { reactive, ref, unref } from 'vue'
import {
  ConfigOrgData, EquipmentData, OtherData
} from "@/api/config/types";
import { saveConfigOrgApi, getConfigOrgApi } from "@/api/config/index";
import EquipmentEdit from "@/views/org/equipmentEdit.vue";
import OtherEdit from "@/views/org/otherEdit.vue";
import { FormSchema } from "@/types/form";

const loading = ref(false)

const editEquipmentRef = ref<ComponentRef<typeof EquipmentEdit>>();
const editOtherRef = ref<ComponentRef<typeof OtherEdit>>();

const save = async () => {
  const ConfigOrg = unref(editEquipmentRef)
  const ConfigOrg2 = unref(editOtherRef)

  await ConfigOrg?.elFormRef?.validate(async (isValid) => {
    if (isValid) {
      equipmentData.value = (await ConfigOrg?.getFormData()) as EquipmentData
    }
  })
  await ConfigOrg2?.elFormRef?.validate(async (isValid) => {
    if (isValid) {
      otherData.value = (await ConfigOrg?.getFormData()) as OtherData
    }
  })
  loading.value = true
  const data = Object.assign(equipmentData.value, otherData.value);
  const res = await saveConfigOrgApi(data)
    .catch(() => {
    })
    .finally(() => {
      loading.value = false
    })
  if (res) {
    ElMessage.success(res.msg);
  }
}
const handleReset = () => {
  console.log(1);
}
const statusOptions = [
  { label: '禁用', value: 0 },
  { label: '启用', value: 1 }
]
const activeTabName = ref("equipmentInfo");
const equipmentFormSchema = reactive<FormSchema[]>([
  {
    field: 'user_limit',
    label: '沙箱数量上限',
    component: 'Input',
    formItemProps: {
      required: false
    }, colProps: {
      span: 24
    }
  },
  {
    field: 'user_space_limit',
    label: '沙箱空间上限',
    component: 'Input',
    formItemProps: {
      required: false
    }, colProps: {
      span: 24
    }
  },
  {
    field: 'user_files_limit',
    label: '沙箱文件数量上限',
    component: 'Input',
    formItemProps: {
      required: false
    }, colProps: {
      span: 24
    }
  },
  {
    field: 'data_limit',
    label: '秘文端数量上限',
    component: 'Input',
    formItemProps: {
      required: false
    }, colProps: {
      span: 24
    }
  },
  {
    field: 'data_space_limit',
    label: '秘文端空间上限',
    component: 'Input',
    formItemProps: {
      required: false
    }, colProps: {
      span: 24
    }
  },
  {
    field: 'data_snapshot_limit',
    label: '组织沙箱快照数上限',
    component: 'Input',
    formItemProps: {
      required: false
    }, colProps: {
      span: 24
    }
  },
  {
    field: 'valid_time',
    label: '组织账户有效期',
    component: 'Input',
    formItemProps: {
      required: false
    }, colProps: {
      span: 24
    }
  }
]);
const otherFormSchema = reactive<FormSchema[]>([
  {
    field: 'ssdevice_ssvs_count',
    label: '数组端仓库最大数量',
    component: 'Input',
    componentProps: {
      slots: {
        prepend: true,
        append: true
      }
    },
    formItemProps: {
      required: false
    }, colProps: {
      span: 24
    }
  },
  {
    field: 'ssdevice_max_space_one_ssvs',
    label: '数组端单仓库最大容量',
    component: 'Input',
    componentProps: {
      slots: {
        prepend: true,
        append: true
      }
    },
    formItemProps: {
      required: false
    }, colProps: {
      span: 24
    }
  },
  {
    field: 'ssdevice_max_file_count_one_ssvs',
    label: '秘文端单仓库最大文件数',
    component: 'Input',
    componentProps: {
      slots: {
        prepend: true,
        append: true
      }
    },
    formItemProps: {
      required: false
    }, colProps: {
      span: 24
    }
  },
  {
    field: 'ssdevice_storage_total_space',
    label: '每个秘文端最大容量',
    component: 'Input',
    componentProps: {
      slots: {
        prepend: true,
        append: true
      }
    },
    formItemProps: {
      required: false
    }, colProps: {
      span: 24
    }
  },
  {
    field: 'ssdevice_storage_total_file_count',
    label: '秘文端最大文件数量',
    component: 'Input',
    componentProps: {
      slots: {
        prepend: true,
        append: true
      }
    },
    formItemProps: {
      required: false
    }, colProps: {
      span: 24
    }
  },
  {
    field: 'state_snapshot',
    label: '快照设置',
    component: 'Switch',
    formItemProps: {
      required: false
    }, colProps: {
      span: 24
    },
    componentProps: {
      activeValue: statusOptions[1].value,
      activeText: statusOptions[1].label,
      inactiveText: "",
      inactiveValue: statusOptions[0].value
    },
  },
  {
    field: 'state_share',
    label: '分享设置',
    component: 'Switch',
    formItemProps: {
      required: false
    }, colProps: {
      span: 24
    },
    componentProps: {
      activeValue: statusOptions[1].value,
      activeText: statusOptions[1].label,
      inactiveText: "",
      inactiveValue: statusOptions[0].value
    },
  },
  {
    field: 'state_log',
    label: '审计设置',
    component: 'Switch',
    formItemProps: {
      required: false
    }, colProps: {
      span: 24
    },
    componentProps: {
      activeValue: statusOptions[1].value,
      activeText: statusOptions[1].label,
      inactiveText: "",
      inactiveValue: statusOptions[0].value
    },
  },
  {
    field: 'state_policy',
    label: '防泄漏设置',
    component: 'Switch',
    formItemProps: {
      required: true
    }, colProps: {
      span: 24
    },
    componentProps: {
      activeValue: statusOptions[1].value,
      activeText: statusOptions[1].label,
      inactiveText: "",
      inactiveValue: statusOptions[0].value
    },
  }
]);

const currentData = ref({} as ConfigOrgData);
const equipmentData = ref({} as EquipmentData);
const otherData = ref({} as OtherData);

const copy = (source, dest) => {
  for (let key in dest) {
    if (source.hasOwnProperty(key)) {
      dest[key] = source[key];
    }
  }
}

getConfigOrgApi().then(res => {
  currentData.value = JSON.parse(res.data.val);
  copy(currentData.value, equipmentData.value);
  copy(currentData.value, otherData.value);
})
</script>

<template>
  <ContentWrapNoHeaderLine title="组织模板">
    <el-tabs v-model="activeTabName">
      <el-tab-pane label="设备信息" name="equipmentInfo">
        <EquipmentEdit ref="editEquipmentRef" :form-schema="equipmentFormSchema" :current-row="equipmentData" />
      </el-tab-pane>
      <el-tab-pane label="其他信息" name="otherInfo">
        <OtherEdit ref="editOtherRef" :form-schema="otherFormSchema" :current-row="otherData" />
      </el-tab-pane>
    </el-tabs>

    <ElButton type="primary" :loading="loading" @click="save">
      提交
    </ElButton>
    <ElButton @click="handleReset">重置</ElButton>
  </ContentWrapNoHeaderLine>
</template>
